<!doctype html >
<html class="x-admin-sm" lang="en" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="#{system_name}"></title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <link rel="stylesheet" th:href="@{/css/theme49.min.css}">
    <script th:href="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:href="@{/js/xadmin.js}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script>
        // 是否开启刷新记忆tab功能
        // var is_remember = false;
    </script>
</head>
<body>
<!-- 顶部开始 -->
<div class="container">
    <div class="layui-card">
        <div class="layui-card-body ">

            <div class="layui-card-body ">
                <form class="layui-form layui-col-space5">

                    <div class="layui-form-item">
                        <label class="layui-form-label">单行输入框</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline layui-show-xs-block">
                        <button class="layui-btn" lay-submit="" lay-filter="findbtn">查询</button>
                    </div>

                </form>
            </div>

            <table id="tpstable" lay-filter="table"></table>
        </div>
    </div>

</div>

<script>
    layui.use(['form', 'table'], function () {
        //监听提交
        form.on('submit(findbtn)', function (data) {
            search(data.field);
            return false;
        });

        var table = layui.table;

        //第一个实例

        function search(params) {
            var renderOptions = {
                elem: '#airfreighttable'
                // ,height: 312
                , url: '/freight/findAllAirinFreight' //数据接口
                , page: true //开启分页
                , request: {
                    pageName: 'page' //页码的参数名称，默认：page
                    , limitName: 'limit' //每页数据量的参数名，默认：limit
                }
                , parseData: function (res) { //res 即为原始返回的数据
                    console.log(res);
                    console.log(res.data.list)
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.list //解析数据列表
                    };
                }
                , response: {
                    statusName: 'code' //规定数据状态的字段名称，默认：code
                    , statusCode: 1 //规定成功的状态码，默认：0
                    , msgName: 'msg' //规定状态信息的字段名称，默认：msg
                    // ,countName: 'data.total' //规定数据总数的字段名称，默认：count
                    // ,dataName: 'data.list' //规定数据列表的字段名称，默认：data
                }
                , where: params
                , cols: [[ //表头
                    {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                    , {field: 'originCountry', title: '出发国', width: 80}
                    , {field: 'originStation', title: '出发站', width: 80, sort: true}
                    , {field: 'destiantionCountry', title: '到达国', width: 80, sort: true}
                    , {field: 'destinationStation', title: '到达站', width: 80, sort: true}
                    , {field: 'needDay', title: '耗用天数预估', width: 80, sort: true}
                    , {field: 'route', title: '航线', width: 150}
                    , {field: 'airCompany', title: '航空公司', width: 120, sort: true}
                    , {field: 'paxOrFrt', title: '机型', width: 80}
                    , {title: '费用', width: 135, fixed: 'right', toolbar: '#costTpl'}
                ]]
            };
            table.render(renderOptions);
        }

        search({
            originStation: '',
            destinationStation: '',
            airCompany: ''
        });

    })
</script>


</body>

</html>
